<template>
<div>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="24" type="flex">
            <Col v-bind="grid">
                <DatePicker type="daterange" v-width="'100%'" v-model="data.date" placeholder="日期选择" element-id="date" />
            </Col>
            <Col v-bind="grid">
                <Input v-model="data.name" placeholder="请输入患者姓名/手机号/诊疗号" element-id="name" />
            </Col>
            <Col v-bind="grid">
                <FormItem label="来源渠道" prop="channel" label-for="channel">
                    <Select v-model="data.channel" placeholder="渠道" element-id="channel">
                        <Option :value="0">抖音</Option>
                        <Option :value="1">微信群</Option>
                        <Option :value="2">百度</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="就诊类型" prop="disease" label-for="disease">
                    <Select v-model="data.diagnosis" placeholder="就诊类型" element-id="diagnosis">
                        <Option :value="0">初诊</Option>
                        <Option :value="1">复诊</Option>
                        <Option :value="2">未及时复诊</Option>
                        <Option :value="3">抗复发</Option>
                        <Option :value="4">流失</Option>
                        <Option :value="5">断诊</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="诊室" prop="room" label-for="room">
                    <Select v-model="data.room" placeholder="诊室" element-id="channel">
                        <Option :value="0">一诊</Option>
                        <Option :value="1">二诊</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="4" class="ivu-text-right">
                <Button type="primary" @click="handleAllocation">分配</Button>
            </Col>
        </Row>
    </Form>
            <Modal v-model="modal" title="分配患者" @on-ok="handleSubmit" @on-cancel="handleDrawerCancel">
            <Form :model="formData" label-position="top">
                <FormItem label="咨询人员" prop="personnel" label-for="personnel">
                    <Select filterable multiple>
                        <Option
                            v-for="item in cityList"
                            :value="item.value"
                            :key="item.value"
                        >{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        data () {
            return {
                modal: false,
                formData: {
                    personnel: []
                },
                cityList: [
                    {
                        value: '高玲',
                        label: '高玲'
                    },
                    {
                        value: '刘艳',
                        label: '刘艳'
                    },
                    {
                        value: '王芳',
                        label: '王芳'
                    },
                    {
                        value: '张在峰',
                        label: '张在峰'
                    },
                    {
                        value: '月饼',
                        label: '月饼'
                    },
                    {
                        value: '老胡',
                        label: '老胡'
                    }
                ],
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    name: '',
                    date: '',
                    consultant: '',
                    channel: '',
                    room: '',
                    diagnosis: ''
                },
                rules: {

                }
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            handleAllocation () {
                this.modal = true;
            },
            handleDrawerCancel () {
                this.$Message.warning('已取消!');
                this.modal = false;
            },
            handleSubmit () {
                this.$Message.success('分配成功!');
                this.modal = false;
            }
        }
    }
</script>
